// 用户信息列表
<template>
  <el-row class="content">

    <el-row>
      <el-col :span="21">
        <el-row class="card-title" style="margin:0;"> 会员资料 </el-row>
        <el-row class="card-content" v-for="(item,index) in userMap.member" :key="item">
          <el-col :span="8" class="card-left">{{item}}</el-col>
          <el-col :span="16" class="card-right">{{memberInfo[index]}}</el-col>
        </el-row>
      </el-col>
      <el-col :span="3">
      </el-col>
    </el-row>

    <el-row style="margin-top:10px;">
      <el-col :span="21">
        <el-tabs v-if="memberInfo.commissions" type="border-card" v-model="game_code">
          <el-tab-pane v-for="(item,index) in memberInfo.games" :key="`gameid${index}`" :name="index" :label="item">
            <el-table :data="list" v-loading="loading" key="listTable" element-loading-text="加载中" border fit size="small" :header-row-class-name="headerClass">
              <el-table-column prop="comm_name" label="玩法" align="center" class-name="table-label" width="130px"> </el-table-column>
              <el-table-column prop="a_commission" label="A盘退水" align="center"> </el-table-column>
              <el-table-column prop="order_min_amount" label="单注最低" align="center"> </el-table-column>
              <el-table-column prop="order_max_amount" label="单注最高" align="center"> </el-table-column>
              <el-table-column prop="period_max_amount" label="单期最高" align="center"> </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

  </el-row>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { user as userMap } from '@/utils/map' // 参数映射

  export default {
    computed: {
      ...mapGetters([
        'memberInfo',
        'memberGames',
        'memberPages',
        'memberLottery',
        'memberOdds',
        'memberGameSelected',
        'memberPageSelected',
      ]),
      list() {
        return this.memberInfo.commissions[this.game_code]
          ? Object.values(this.memberInfo.commissions[this.game_code])
          : []
      },
    },
    data() {
      return {
        loading: false,
        game_code: null,
        userMap: userMap, // 用户字段映射
      }
    },

    // 数据格式化
    filters: {
      filterHandicaps() {},
      // 根据操作,返回修改额度的最大值
    },
    created() {
      // 验证参数
      // this.checkParams(this.$route.params)
      // 拉取数据
      // this.fetchData()
      this.game_code = Object.keys(this.memberInfo.commissions)[0]
    },
    methods: {
      headerClass(...args){
        return 't-header'
      }
    },
    watch: {
      $route(to, from) {},
    },
  }
</script>
<style>
  .content {
    padding: 5px;
  }
  .input-contain {
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .member-odd .el-row {
    background-color: beige;
    padding: 3px;
  }
  .member-odd .el-row .el-col {
    padding: 3px;
  }
  .game-card {
    padding-right: 5px;
  }
  .card-title {
    margin-top: 8px;
    height: 30px;
    border: 1px solid #cdcfd4;
    background: url(/static/member/images/skin/blue/bg-sprites.png) repeat-x 0 -58px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
  }
  .card-content .el-col {
    border: 1px solid #cdcfd4;
    height: 35px;
    line-height: 35px;
    border-top: none;
    text-align: center;
  }
  .card-content .card-left {
    background-color: rgb(236, 243, 256);
  }
  .card-content .card-middle {
    border-left: none;
    color: red;
  }
  .card-content .card-right {
    border-left: none;
  }
  .table-label {
    background-color: rgb(237, 248, 248);
  }
  .t-header{
    height: 30px;
    border: 1px solid #cdcfd4;
    background: url(/static/member/images/skin/blue/bg-sprites.png) repeat-x 0 -58px;
  }
</style>

